<!--
  ~ Copyright 2020 Netflix, Inc.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html>
<head>
    <meta charset="UTF-8">
    <title><DGS_GRAPHIQL_TITLE></title>
    <link href="/graphiql/css/graphiql.min.css" rel="stylesheet" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>

<script
        crossorigin
        src="/graphiql/js/react.production.min.js"
></script>
<script
        crossorigin
        src="/graphiql/js/react-dom.production.min.js"
></script>
<script
        crossorigin
        src="/graphiql/js/graphiql.min.js"
></script>

<script>
      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search.substr(1).split('&').forEach(function (entry) {
        var eq = entry.indexOf('=');
        if (eq >= 0) {
          parameters[decodeURIComponent(entry.slice(0, eq))] =
            decodeURIComponent(entry.slice(eq + 1));
        }
      });
      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables =
            JSON.stringify(JSON.parse(parameters.variables), null, 2);
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }
      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }

      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }

      function onEditHeaders(newHeaders) {
        parameters.headers = newHeaders;
        updateURL();
      }

      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }

      function updateURL() {
        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
          return Boolean(parameters[key]);
        }).map(function (key) {
          return encodeURIComponent(key) + '=' +
            encodeURIComponent(parameters[key]);
        }).join('&');
        history.replaceState(null, null, newSearch);
      }
      function graphQLFetcher(graphQLParams) {
        var headers = {
          "Accept": "application/json",
          "Content-Type": "application/json",
        };

        if (parameters.headers) {
          var extraHeaders = JSON.parse(parameters.headers);
          for (var headerName in extraHeaders) {
            if (extraHeaders.hasOwnProperty(headerName)) {
              headers[headerName] = extraHeaders[headerName];
            }
          }
        }
        var origin = location.origin;
        return fetch(origin + '<DGS_GRAPHQL_PATH>', {
          method: 'post',
          headers: headers,
          body: JSON.stringify(graphQLParams),
        }).then(function (response) {
          return response.text();
        }).then(function (responseBody) {
          try {
            return JSON.parse(responseBody);
          } catch (error) {
            return responseBody;
          }
        });
      }
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          query: parameters.query,
          variables: parameters.variables,
          headers: parameters.headers,
          operationName: parameters.operationName,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          onEditHeaders: onEditHeaders,
          onEditOperationName: onEditOperationName,
          defaultSecondaryEditorOpen: true,
          headerEditorEnabled: true,
          shouldPersistHeaders: true,
          docExplorerOpen: true,
        }),
        document.getElementById('graphiql')
      );
</script>
</body>
</html>
